<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零点书喵--首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/personal.css">
</head>

<body>
    <!-- 此乃头部部分开始 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <a href="about.html">
                <image src="images/logo.png" style="width:195px; height:42px;" alt=""></image>
            </a>
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">商品</a></li>
                <li><a href="book.html">在线书城</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" placeholder="请输入你要搜索的书籍">
            <button></button>
        </div>
        <!--个人中心部分开始-->
        <div class="personal">
            <dl>
                <dt class="login">
                    <span><a href="#">登录</a></span>
                    <div class="login1">
                        <p><a href="#">注册</a></p>
                    </div>
                </dt>
                <dd>
                    <s>
                        <img src="images/ld.png" alt="">
                    </s>
                    <span>
                        <a href="about.html"><img src="images/user.png" alt=""></a>
                        <a href="about.html">落影殇随</a>
                    </span>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 个人中心部分结束 -->
    <!-- 此乃头部部分结束 -->
    <!-- 此乃banner部分开始 -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="subnav">
                <ul>
                    <li class="vertical"><a href="#">趣智少儿 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">热销小说 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">青春动漫 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">经济管理 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">励志人生 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">政治军事 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">网络互联 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">外语学习 <span> &gt; </span></a></li>
                    <li class="vertical"><a href="#">考试辅导 <span> &gt; </span></a></li>
                </ul>
            </div>
            <!-- 中间轮播图模块开始 -->
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 中间轮播图模块结束 -->
            <!-- 此乃课程表模块 -->
            <div class="course">
                <h2>今日推荐</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续阅读 秃头一百招</h4>
                            <p>正在阅读-生发的方法</p>
                        </li>
                        <li>
                            <h4>继续阅读 秃头一百招</h4>
                            <p>正在阅读-生发的方法</p>
                        </li>
                        <li>
                            <h4>继续阅读 秃头一百招</h4>
                            <p>正在阅读-生发的方法</p>
                        </li>
                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
            <!-- 此乃课程表模块尾部 -->
        </div>
    </div>
    <!-- 此乃banner部分结束 -->
    <!-- 此乃精品推荐模块开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">热销书籍</a></li>
            <li><a href="#">活动折扣</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 此乃精品推荐模块结束 -->
    <!-- 此乃核心内容区域开始 -->
    <div class="box w" style="overflow: hidden;">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="items">
            <div class="item">
                <div class="p">热销书籍</div>
            </div>
            <div class="item clearfix">
                <img src="images/book5.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
            <div class="item clearfix">
                <img src="images/book5.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
            <div class="item clearfix">
                <img src="images/book5.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
            <div class="item clearfix">
                <img src="images/book5.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="items">
            <div class="item">
                <div class="p">经典套系</div>
            </div>
            <div class="item clearfix">
                <img src="images/book6.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
            <div class="item clearfix">
                <img src="images/book6.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
            <div class="item clearfix">
                <img src="images/book6.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
            <div class="item clearfix">
                <img src="images/book6.png" alt="">
                <div class="desc">
                    <div class="detail"><i>￥36.00</i>[已售7件]
                        <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 此乃核心内容区域结束 -->
        <!-- 此乃第二页面区域开始 -->
        <div class="box w clearfix">
            <div class="box-hd">
                <h3>璀璨新星</h3>
                <span><a href="#">热门</a>
                <a href="#">玄幻</a>
                <a href="#">穿越</a>
                <a href="#">热血</a></span>
                <a href="#">查看全部</a>
            </div>
            <div class="start">
                <div class="pic1">
                    <img src="images/pic1.png">
                </div>
                <div class="one">
                    <div class="pic2">
                        <img src="images/pic2.png">
                    </div>
                    <div class="items">
                        <div class="item clearfix">
                            <img src="images/book7.png" alt="">
                            <div class="desc">
                                <div class="detail"><i>￥36.00</i>[已售7件]
                                    <a href="#"><img title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                                </div>
                            </div>
                        </div>
                        <div class="item clearfix">
                            <img src="images/book7.png" alt="">
                            <div class="desc">
                                <div class="detail"><i>￥36.00</i>[已售7件]
                                    <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                                </div>
                            </div>
                        </div>
                        <div class="item clearfix">
                            <img src="images/book7.png" alt="">
                            <div class="desc">
                                <div class="detail"><i>￥36.00</i>[已售7件]
                                    <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                                </div>
                            </div>
                        </div>
                        <div class="item clearfix">
                            <img src="images/book7.png" alt="">
                            <div class="desc">
                                <div class="detail"><i>￥36.00</i>[已售7件]
                                    <a href="#"><img border="0" title="联系卖家" alt="联系卖家" src="images/shop.png" style="width:15px; height:15px;"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 此乃第二页面区域结束 -->
    <!-- footer模块制作 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <a href="about.html"><img src="images/logo.png" style="width: 195px; height:42px;" alt=""></a>
                <p>零点书喵致力于为全国富有好奇心的男孩纸女孩纸提供知识体系<br /> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="https://space.bilibili.com/394234693" class="user">联系作者</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于零点</dt>
                    <dd>关于</dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于零点</dt>
                    <dd>关于</dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于零点</dt>
                    <dd>关于</dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>